﻿<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>黑夜主权(Night)</title>
    
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
  <!--   <meta name="apple-mobile-app-capable" content="yes">
    <meta name="apple-mobile-app-status-bar-style" content="black"> -->
   
    <meta name="description" content="一只叫做黑夜的阿宅，想成为家喻户晓的大侠">
    <meta name="keywords" content="二次元，宅属性，前端，编程，全栈，绘画，设计">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="author" content="cononico">
    <meta name="application-name" content="Cononico" >

    <link rel="stylesheet" type="text/css" href="css/main.css">
    <link rel="stylesheet" type="text/css" href="css/process.css">
    <link rel="shortcut icon"  type="image/x-icon" href="favicon.ico" />
    
    <script type="text/javascript">
        //设定rem值
        document.getElementsByTagName("html")[0].style.fontSize = document.documentElement.clientWidth/20 + 'px';
    </script>
</head>
<body>
 <div id="sound">
            <audio src="images/BIG.mp3" id="bell" preload="none"loop></audio>
           
        </div>
	<header class="head">
        <div class="head_logo_div">
            <img class="logo_img" src="images/upload/head.jpg"></a>
        </div>
        <div class="head_nav_div">
             <nav class="head_nav">
                <ul id="nav_ul">
                    <li class="nav_li_on nav_ul_li">简历首页</li>
                    <li class="nav_ul_li">技能</li>
                    <li class="nav_ul_li">经历</li>
                    <li class="nav_ul_li">生活那点小事</li>
                    <li class="nav_ul_li">联系我</li>
                </ul>
            </nav>
        </div>
        <div class="clear"></div>
    </header>
    
    <ul class="float_btn" id="float_btn">
        <li class="btn_on"></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    
    <div class="wrapBox" id="wrapBox">
        <div class="box">
            <img class="box_bg" src="images/upload/pic_1.jpg">
            <div class="box01_content">
                <div class="head_div">
                    <div class="cycle_item">
                        <a href="#" class="github_a" id="github_a" target="_blank">
                            <span class="github_icon"></span>
                            <span class="github_text"><p class="item_name">GitHub</p></span>
                        </a>
                        <a href="#" class="weibo_a" id="weibo_a" target="_blank">
                            <span class="weibo_icon"></span>
                            <span class="weibo_text"><p class="item_name">微博</p> </span>
                        </a>
                        <a href="#" class="blog_a" id="blog_a" target="_blank">
                            <span class="blog_icon"></span>
                            <span class="blog_text"><p class="item_name"> 博客</p></span>
                        </a>

                        <div class="green_cycle">
                            <img class="green_cycle_img" src="images/icon/green_cycle.svg">
                            <div class="yellow_cycle">
                                <img class="yellow_cycle_img" src="images/icon/yellow_cycle.svg">
                                <div class="blue_cycle">
                                    <img class="blue_cycle_img" src="images/icon/blue_cycle.svg">
                                    <div class="head_img_div">
                                        <img class="head_img" src="images/upload/head.jpg">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <h1 class="title">杨杨</h1>
                <h2 class="title_h2">芳龄：23</h2>
                <div id="box01_text">
                <p class="box01_p">脑洞经常大开的前端女程序员;经手的项目：链家商城，欧德思官网，三板加后台管理系统，三板加APP.</p>          
                </div>
            </div>
            <div class="arrow_div">
                <img class="arrow_img" src="images/icon/arrowhead.png">
            </div>
        </div>
        
        <div class="box">
            <img class="box_bg" src="images/upload/pic_2.jpg">
            
            <div class="box02_content box_content">
                <div id='bar_container' class="bar_container">
                    <div class='bar mint' data-percent='70' data-skill='HTML5+CSS3'></div>
                    <div class='bar red' data-percent='50' data-skill='JavaScript'></div>
                    <div class='bar lila' data-percent='50' data-skill='前端工程化'></div>
                    <div class='bar orange' data-percent='50' data-skill='Node.js'></div>
                    <div class='bar gray' data-percent='30' data-skill='PHP || C++'></div>
                    <div class="bar blue" data-percent='50' data-skill='PS&AE&PR&AI'></div>
                    <div class="bar green" data-percent='60' data-skill='绘画'></div>
                </div>
                <div id="box02_text">
                    <h1>个人技能</h1>
                    <div class="overline"></div>
                    <p>2012,第一次接触是JS,在拥挤的实验室</p>
                    <p>2013,疯狂的迷恋上了写酷炫的页面</p>
                    <p>2013年以前端工作的我，阴差阳错的写了PHP,挺好玩的，但是但是服务端水太深，我胆子小</p>
                    <p>对美有着执着信念的我，理想写出各种酷炫效果，毅然决然的选择了前端</p>
                    <p>现在正在学习前端工程化技术</p>
                    <p>喜欢UI,交互设计,觉得UED是我坚持精确1个像素的动力</p>
                    <p>而未来...</p>
                    <p>想成为一名全栈工程师</p>
                </div>
                <div class="clear"></div>
            </div>
            
            <div class="arrow_div">
                <img class="arrow_img" src="images/icon/arrowhead.png">
            </div>
            
        </div>
        
        <div class="box">
            <img class="box_bg" src="images/upload/pic_3.jpg">
            
            <div class="box_content box03_content">
                <ul id="timeUl" class="timeUl">
                    <li>
                        <div>
                            <h1>2010-Now</h1>
                            <p>东北大学</p>
                            <p>专业：软件工程</p>
                            <p>职业：前端工程师</p>
                            <p>最喜欢的科目是:LOL<p>
                            <p>人生目标：简单所以快乐</p>
                        </div>
                    </li>
                    <li>
                        <div>
                            <h1>2014.11-Now</h1>
                            <p>phper,前端工程师</p>
                            <p>程序员是这个世界上最善良，单纯的人，我们远离尔虞我诈，一心想着BUG远离我</p>
                            <p>要么不做，要么做到最好</p>
                           <p>喜欢技术(JS,REACT,EXT,HTML5+CSS3),为了各种酷炫效果埋头苦干</p>
                        </div>
                    </li>
                    <li>
                       <div>
                            <h1>2016.2-Now</h1>
                            <p>一直都很佩服大牛们，总感觉他们是世界上最聪明，最理智的人。最近听说我的JS也可以做服务端了，小主我甚是开心！！！</p>
                            <p>想做一个每天都在进步的小菜鸟</p>
                            
                            <p>大牛就是我师父，爱我的人，我也会深爱着他</p>
                        </div>
                    </li>
                    <li>
                       <div>
                            <h1>Future</h1>
                            
                            <p>...</p>
                        </div>
                    </li>
                </ul>
                 <div class="left_div" id="left_div">
                     <img class="left_arrow" src="images/icon/arrowleft.png">
                 </div>
                 <div class="right_div" id="right_div">
                      <img class="right_arrow" src="images/icon/arrowright.png">
                 </div>
            </div>
            
             <div class="arrow_div">
                <img class="arrow_img" src="images/icon/arrowhead.png">
            </div>
        </div>
        
        
        <div class="box">
            
            <img class="box_bg" src="images/upload/pic_4.jpg">
            <div class="box_content box04_content">
                <h1 class="box04_title">生活那点小事</h1>
                <ul class="hobby_content">
                    <li class="hobby_01">
                        <div class="hobby_img_div">
                            <div class="spinner spinner_01"></div>
                            <div class="hobby_img">
                                <img src="images/upload/kapok.jpg">
                            </div>
                            <div class="hobby_img_info">
                                <h1>绘画</h1>
                                <h2>手绘&CG</h2>
                            </div>
                        </div>
                        <div class="hobby_text_div">
                            <div class="hobby_img_info_mob">
                                <h1>绘画/<a>手绘&CG</a></h1>
                            </div>
                            <p class="about_p">
                                对于绘画的热爱一部分来自于对ACG的热爱,小学时就开始拿着笔头被要烂的铅笔瞎画,
                                可惜父母和我都没发现这是个值得培养的爱好,以至于现在发展为一个手残.
                            </p>
                           
                        </div>
                    </li>
                    <li class="hobby_02">
                        <div class="hobby_img_div">
                            <div class="spinner spinner_02"></div>
                            <div class="hobby_img">
                                <img src="images/upload/acg.png">
                            </div>
                            <div class="hobby_img_info">
                                <h1>ACG</h1>
                                <h2>动漫&视频&lol</h2>
                            </div>
                        </div>
                        <div class="hobby_text_div">
                            <div class="hobby_img_info_mob">
                                <h1>ACG/<a>动漫&视频&lol</a></h1>
                            </div>
                            <p class="about_p">
                                入宅作《犬夜叉》,看完《Angle Beats!》深陷泥潭,最喜欢K社的作品(包括Galgame),
                                崇拜麻枝准,喜欢的歌手是GD,周杰伦，是个典型的欧巴控重度患者.
                            </p>
                           
                        </div>
                    </li>
                    <li class="hobby_03">
                        <div class="hobby_img_div">
                            <div class="spinner spinner_03"></div>
                            <div class="hobby_img">
                                <img src="images/upload/reading.jpg">
                            </div>
                            <div class="hobby_img_info">
                                <h1>文学</h1>
                                <h2>历史&写作</h2>
                            </div>
                        </div>
                        <div class="hobby_text_div">
                            <div class="hobby_img_info_mob">
                                <h1>文学/<a>历史&写作</a></h1>
                            </div>
                            <p class="about_p">
                                和大多数人一样曾经也在可当上捧着一本小说看,以前喜欢小四韩寒马尔克斯村上春树,现在的兴趣
                                转移到历史上去了,屌丝只有多读书才能提高自己的内涵.
                            </p>
                          
                        </div>
                    </li>
                    <div class="clear"></div>
                </ul>
            </div>
             <div class="arrow_div">
                <img class="arrow_img" src="images/icon/arrowhead.png">
            </div>
        </div>
        
        <foot id="foot" class="foot">
            <h1 class="foot_title">联系我</h1>
           
            <div class="foot_power">
                <h3>©2016 yang
                    <a href="#"> Night's</a>
                    <a href="#">黑夜主权</a>
                </h3>
            </div>
        </foot>
    </div>
    <script type="text/javascript" src="js/main.js"></script>
</body>
    
</html>

 